<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-cn">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <title>工资条管理</title>

    <link rel="stylesheet" type="text/css" href="/src/css/themes/default.css"/>
    <!-- iview样式 -->
    <link rel="stylesheet" type="text/css" href="/plugins/iview/css/iview.css"/>
    <!--@import url("//unpkg.com/iview/dist/styles/iview.css");-->
    <!--<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>-->
    <!-- 引入layui样式 -->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/plugins/popover/popover.css">
    <!--   <script src="//unpkg.com/vue/dist/vue.js"></script>
       <script src="//unpkg.com/iview/dist/iview.min.js"></script>-->
    <!-- 引入vue -->
    <script type="text/javascript" src="/plugins/vue/vue.min.js"></script>
    <!-- iview js -->
    <script type="text/javascript" src="/plugins/iview/js/iview.js"></script>
    <script src="/properties/config.js"></script>
    <!--引入layui.js-->
    <script src="/plugins/layui/layui.js"></script>
    <!--引入axios.js 用于ajax调用-->
    <script src="/plugins/axios/axios.min.js"></script>
    <script type="text/javascript" src="/plugins/jquery-1.9.1.min.js"></script>
    <script src="/build/js/appToken.js"></script>
    <script src="/plugins/popover/popover.js"></script>
</head>
<style>
    #popoverWrapper {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        position: fixed;
        height: 100%;
        width: 200px;
        padding-top: 14px;
        visibility: hidden;
        top: 0;
        left: 0;
        box-sizing: border-box;
        z-index: 10;
    }

</style>
<body>
<!--隐藏元素-->
<!--<p id="staffType"  th:attr="value=${staffType}"  hidden />-->
<!--使用v-cloak技术，在vue渲染完毕前隐藏页面，渲染完成后显示-->
<div id="app" v-cloak>


    <!-- 搜索工具框 开始-->
    <row style="padding: 10px">
        <i-col span="24">
            <Card>
                <p slot="title">
                    <Icon type="ios-search"></Icon>
                    搜索条件
                </p>
                <!--右上侧按钮列表-->
                <i-button slot="extra" type="info" :loading="loading" icon="ios-search" @click="toLoading"
                          style="margin-right:10px">
                    <span v-if="!loading">查询</span>
                    <span v-else>查询中...</span>
                </i-button>
                <i-button slot="extra" type="info" :loading="exporting" @click="clickExport" style="margin-right:10px">
                    <span v-if="!exporting">导出</span>
                    <span v-else>导出中...</span>
                </i-button>
                <i-button slot="extra" type="primary" @click="setEndDate" style="margin-right:10px" id="setEndDate">
                    <span>时间设置</span>
                </i-button>
                <i-button slot="extra" type="primary" @click="sendAll" style="margin-right:10px" id="sendAll">
                    <span>全部发送</span>
                </i-button>
                <i-button slot="extra" type="primary" @click="failRetry" style="margin-right:10px" id="failRetry">
                    <span>失败重发</span>
                </i-button>
                <i-button slot="extra" type="primary" @click="withdrawAll" style="margin-right:10px" id="withdrawAll">
                    <span>全部撤回</span>
                </i-button>
                <i-button slot="extra" type="info" @click="finalState" style="margin-right:10px">
                    <span>入库</span>
                </i-button>
                <i-button slot="extra" @click="deleteAll" style="margin-right:10px" type="error" id="deleteAll">
                    <span>删除</span>
                </i-button>
                <!--查询表单内容-->
                <row :gutter="16">
                    <i-form ref="searchForm" :model="searchForm" label-position="right" :label-width="100">
                        <i-col span="8">
                            <form-item label="发薪时间：" prop="paydayTimeYear">
                                <i-col span="12">
                                    <date-picker v-model="searchForm.paydayTimeYear" :clearable="false" type="month"
                                                 placeholder="请选择" style="width: 176px"></date-picker>
                                </i-col>
                            </form-item>

                        </i-col>
                        <i-col span="8">
                            <form-item label="模板类型：" prop="salaryTableName">
                                <i-select v-model="searchForm.templateCode" filterable style="width: 176px">
                                    <i-option value="MB2018042701">考勤模板</i-option>
                                    <i-option value="MB2018042702">工资模板</i-option>
                                    <i-option value="MB2018042703">基础模板</i-option>
                                </i-select>
                            </form-item>
                        </i-col>
                        <i-col span="8">
                            <form-item label="关键字：" prop="keyworld">
                                <i-input v-model="searchForm.keyworld" placeholder="姓名/工号" maxlength="30"
                                         style="width: 176px"></i-input>
                            </form-item>
                        </i-col>
                    </i-form>
                </row>
            </Card>
        </i-col>
    </row>

    <!-- 搜索工具框 结束-->
    <row style="padding: 10px">

        <Modal
                v-model="endDateModel"
                title="截止日期设置"
                :mask-closable="false">
            <i-form ref="timeForm" :model="timeForm" :rules="emailFormValidate" :label-width="150">
                <form-item label="截止时间：" prop="endTime">
                    <date-picker v-model="timeForm.endTime" type="datetime" @on-change="timeForm.endTime=$event" format="yyyy-MM-dd HH:mm"
                                 placeholder="yyyy-mm-dd" style="width: 300px"></date-picker>
                </form-item>
            </i-form>

            <div slot="footer" style="text-align:left">
                <i-button type="primary" @click="endDateSet">
                    <span>设置</span>
                </i-button>
                <i-button type="ghost" @click="cancelEndDate"
                          style="margin-left: 8px;background-color:rgba(255, 153, 0, 1);color:#ffffff">取消
                </i-button>
            </div>

        </Modal>
    </row>
    <!-- 表单Grid，使用layerUI的表格组件 开始 -->
    <row style="padding: 10px">

        <Modal
                v-model="sendSalary"
                title="发送选择"
                :mask-closable="false">
            <i-form ref="emailForm" :model="emailForm" :rules="emailFormValidate" :label-width="150">
                <form-item label="发送类型：" prop="sendType">
                    <radio-group v-model="emailForm.sendType">
                        <radio label="1" id="kqRadio">考勤</radio>
                        <radio label="2" id="xzRadio">薪资</radio>
                    </radio-group>
                </form-item>
                <form-item label="发送服务器：" prop="sendServer">
                    <checkbox-group v-model="emailForm.sendServer">
                        <checkbox label="1">邮件</checkbox>
                        <checkbox label="2">钉钉</checkbox>
                    </checkbox-group>
                </form-item>
                <form-item label="邮件类型：" prop="emailType" id="emailType">
                    <radio-group v-model="emailForm.emailType">
                        <radio label="1" >薪资确认邮件</radio>
                        <radio label="2" >薪资发放邮件</radio>
                    </radio-group>
                </form-item>
            </i-form>

            <div slot="footer" style="text-align:left">
                <i-button type="primary" @click="confirmSend">
                    <span>发送</span>
                </i-button>
                <i-button type="ghost" @click="cancelSend"
                          style="margin-left: 8px;background-color:rgba(255, 153, 0, 1);color:#ffffff">取消
                </i-button>
            </div>

        </Modal>
    </row>

    <row style="padding: 10px">

        <Modal
                v-model="reCallModel"
                title="撤回选择"
                :mask-closable="false">
            <i-form ref="emailForm" :model="reCallForm" :rules="emailFormValidate" :label-width="150">
                <form-item label="撤回类型：" prop="sendType">
                    <radio-group v-model="reCallForm.sendType">
                        <radio label="1" id="kqRadio">考勤</radio>
                        <radio label="2" id="xzRadio">薪资</radio>
                    </radio-group>
                </form-item>
                <form-item label="发送服务器：" prop="sendServer">
                    <checkbox-group v-model="reCallForm.sendServer">
                        <checkbox label="1">邮件</checkbox>
                        <checkbox label="2">钉钉</checkbox>
                    </checkbox-group>
                </form-item>
            </i-form>

            <div slot="footer" style="text-align:left">
                <i-button type="primary" @click="reCallSend">
                    <span>撤回</span>
                </i-button>
                <i-button type="ghost" @click="cancelReCall"
                          style="margin-left: 8px;background-color:rgba(255, 153, 0, 1);color:#ffffff">取消
                </i-button>
            </div>

        </Modal>
    </row>

    <row style="padding: 10px">
        <i-col span="24">
            <div>
                总记录数：<b id="countNumber"></b>
            </div>
            <div>
                邮件待发送：<b id="preSendNumber"></b> | 邮件已发送：<b id="sendedNumber"></b>| 邮件撤回：<b id="callNumber"></b>| 邮件失败：<b id="failNumber"></b>
            </div>
            <div>
                钉钉待发送：<b id="dpreSendNumber"></b> | 钉钉已发送：<b id="dsendedNumber"></b>| 钉钉撤回：<b id="dcallNumber"></b>| 钉钉失败：<b id="dfailNumber"></b>
            </div>
            <!-- 使用方法渲染模式 -->
            <table id="listTable" lay-filter="listTable" class="layui-hide"></table>

        </i-col>
    </row>

    <!-- 表单Grid，使用layerUI的表格组件 结束 -->
    <!--导出Excel隐藏表单-->
    <iframe id="frame" name="iframe" style="display:none;"></iframe>
    <!--导出Excel隐藏表单-->
</div>
<script type="text/html" id="sendStateTpl">
    {{#  if(d.sendState == 2){ }}
    发送失败
    {{#  } else if(d.sendState == 1){ }}
    已发送
    {{#  } else if(d.sendState == 0){ }}
    未发送
    {{#  } else if(d.sendState == 3){ }}
    已撤回
    {{#  } else { }}
    未发送
    {{# } }}
</script>

<script type="text/html" id="ddStateTpl">
    {{#  if(d.ddState == 2){ }}
    发送失败
    {{#  } else if(d.ddState == 1){ }}
    已发送
    {{#  } else if(d.ddState == 0){ }}
    未发送
    {{#  } else if(d.ddState == 3){ }}
    已撤回
    {{#  } else { }}
    未发送
    {{# } }}
</script>
<script type="text/html" id="barTools">
    {{#  if(d.finalState == 1){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="salaryPreview" ht-auth="salaryPreview">预览</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="salaryPreview" ht-auth="salaryPreview">预览</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs " lay-event="delete" ht-auth="delete">删除</a>
    {{#  } }}

</script>
<script src="/src/js/comm.js"></script>
<script src="/src/js/salarySheet/salarySheetManagement.js"></script>

</body>
</html>